<template>
    <a-form
        :model="form"
        class="form"
        ref="searchForm"

        :labelCol="formItemLayout.labelCol"
        :wrapperCol="formItemLayout.wrapperCol"
        v-show="searchTypeOne"
    >
      <a-row class="form-row" :gutter="16">

        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item label="姓名" name="name">
            <a-input
                placeholder="请输入姓名"
                v-model:value="form.name"
            />
          </a-form-item>
        </a-col>

        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item label="学号" name="id">
            <a-input
                placeholder="请输入学号"
                v-model:value="form.id"
            />
          </a-form-item>
        </a-col>



        <a-col :offset="8">
          <a-button  @click="search" type="primary">查询</a-button>
        </a-col>
        <a-col>
          <a-button @click="reset" >重置</a-button>

          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              展开
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a href="javascript:;" @click="nameAndIdLayout">姓名和学号</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="clazzAndSexLayout">班级和性别</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-col>

      </a-row>

    </a-form>

  <a-form
      :model="form"
      class="form"
      ref="searchForm"

      :labelCol="formItemLayout.labelCol"
      :wrapperCol="formItemLayout.wrapperCol"
      v-show="searchTypeTwo"
  >
    <a-row class="form-row" :gutter="16">


      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="班级" name="clazz">
          <a-input
              placeholder="请输入班级"
              v-model:value="form.clazz"
          />
        </a-form-item>
      </a-col>

      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="性别" name="sex">
          <a-input
              placeholder="请输入性别"
              v-model:value="form.sex"
          />
        </a-form-item>
      </a-col>


      <a-col :offset="8">
        <a-button  @click="searchByClassAndSex" type="primary">查询</a-button>
      </a-col>
      <a-col>
        <a-button @click="reset" >重置</a-button>

        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            展开
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="javascript:;" @click="nameAndIdLayout">姓名和学号</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="clazzAndSexLayout">班级和性别</a>
              </a-menu-item>

            </a-menu>
          </template>
        </a-dropdown>
      </a-col>

    </a-row>

  </a-form>



</template>

<script>
import {Button, Col, DatePicker, Form, Input, Row, Select} from "ant-design-vue";
import { DownOutlined } from '@ant-design/icons-vue';
const FormItem = Form.Item;
const { Option } = Select;
const {RangePicker} = DatePicker;


export default {
  name: "SearchForm",
  components: {
    DownOutlined,
    ARow: Row,
    ACol: Col,
    AForm: Form,
    AButton: Button,
    AInput: Input,
    ARangePicker: RangePicker,
    AFormItem: FormItem,
    ASelect: Select,
    ASelectOption: Option,
  },
  data () {
    return {
      searchTypeOne:true,
      searchTypeTwo:false,
      form:{
        name:'',
        id: '',
        clazz:'',
        sex:''
      },
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },

      sex : '',
      clazz :'',
    }
  },
  methods: {
    search(){
      //console.log(this.form.name);
      //console.log(this.form.id);
      let name = this.form.name;
      let id = this.form.id;
      this.$emit('searching',[name,id]);
    },
    searchByClassAndSex(){
      let clazz = this.form.clazz;
      let sex = this.form.sex;
      this.$emit('searching',[clazz,sex]);
    },
    nameAndIdLayout(){
      this.searchTypeOne = true;
      this.searchTypeTwo = false;
      //this.$emit('searching','nameAndIdSlot');
    },
    clazzAndSexLayout(){
      this.searchTypeOne = false;
      this.searchTypeTwo = true;
      //this.$emit('searching','classSlot');
    },
    reset(){
      this.form.name = '';
      this.form.id = '';
      this.form.clazz = '';
      this.form.sex = '';
    }
  }

}
</script>

<style scoped>

</style>